<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用Ajax实现文件上传</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        $(function(){
            $('#mybtn').click(function(){
                // Ajax实现文件上传时必须使用FormData来封装提交数据
                // var formData = new FormData() // FormData是一个表示表单数据的对象
                // formData.append('uname', $('#uname').val())
                // formData.append('uimage', $('#uimage')[0].files[0])
                var formData = new FormData($('#myform')[0]) // 要求表单元素必须具有name属性

                $.ajax({
                    type:'post', // 请求方式必须为post
                    url:'upload',
                    data:formData,
                    contentType: false, // 发送到服务器内容类型，默认为application/x-www-form-urlencoded，文件上传时必须改为false，表示multipart/form-data
                    processData: false, // 是否将传输的数据处理转换为查询字符串，默认为true，文件上传时必须改为false
                    success:function(res){
                        console.log(res)
                    }
                })
            })
        })
    </script>
</head>
<body>
    <form id="myform" enctype="multipart/form-data">
        姓名：<input type="text" id="uname" name="uname"> <br>
        头像：<input type="file" id="uimage" name="uimage"> <br>
        <button type="button" id="mybtn">提交</button>
    </form>
</body>
</html>